/******************************************************************************************
 * Import
 ******************************************************************************************/
import _ from 'lodash';
import React, {Component} from 'react';
import { StyleSheet, TextInput, View, Dimensions, TouchableOpacity } from 'react-native';
import Design from '../../../design';
import Config from '../../../config';
import ScreenBase from '../../../library/base/screen';
import { Toast, SearchBar, Carousel } from 'antd-mobile-rn';
import { ListItem, CheckBox, Body, List, Button, Icon, Text, Content } from 'native-base';
// import SplashScreen from 'react-native-splash-screen';
import {
    CAround, CBetween, CCenter, CColumn, CHand, CItemX, CItemY, CLine, CRow, CWrap, 
    CIcon, CImage, CSvg, CText,
    CContent, CFloat, CFooter, CHeader, CPage, CSide, 
    CEmpty, CError, CFail, CSkeleton, 
    CLabel, CButton
} from '../../../library/comp';
import {
    HttpText, HttpHesq
} from '../../../library/func';

// svg
import Licon from '../../../library/comp/project/icon';

// 引入自定义组件
import Proj_Prod_List from '../../../library/comp/project/prodList/proj_Prod_List'


/******************************************************************************************
 * Screen
 ******************************************************************************************/
export default class ProductList extends ScreenBase {
    constructor(props) {
        super(props);
        this.state = {
            cid:0,
			background: '#f60',
			status: 'success',
			// 商品列表
			list:[
                {
                    set_name:'人气水果人气水果人气水果人气水果果果果果果果果果',
                    set_price:20,
                    set_original_price:30,
                    count_sale:220,
                    object:{
                        set_image_small:'http://image.cdn.hesq.com.cn/rushbuy/product/20181114/1542164973540zpkr.jpg'
                    }
                },
                {
                    set_name:'人气水果人气水果人气水果人气水果果果果果果果果果',
                    set_price:20,
                    set_original_price:30,
                    count_sale:220,
                    object:{
                        set_image_small:'http://image.cdn.hesq.com.cn/rushbuy/product/20181114/1542164973540zpkr.jpg'
                    }
                },
                {
                    set_name:'人气水果人气水果人气水果人气水果果果果果果果果果',
                    set_price:20,
                    set_original_price:30,
                    count_sale:220,
                    object:{
                        set_image_small:'http://image.cdn.hesq.com.cn/rushbuy/product/20181114/1542164973540zpkr.jpg'
                    }
                }
            ],
			// 搜索框的值
			inputValue:'',
			// 点击过滤项变色
            change: '',
            // 过滤项样式 
            changeClass:[
                {
                    color:'#dc233e',
                },
                {
                    color:'#333',
                }
            ],
			// 搜索词列表数据
			searchWordList:['广西','白洋淀白洋淀白洋淀白洋淀白洋淀白洋淀白洋淀qweqweqweqwewqeqweqw','水果'],
			// 控制搜索弹框显示隐藏
			searchBool:false,
			// 控制价格弹框显示隐藏
            priceBool:false,
            // 屏幕宽高
            windowWidth:Dimensions.get('window').width,
            windowHeight:Dimensions.get('window').height,

			// 页面分享标题，图片
			share_title: '每日一达',
			share_img: '20181123/sharenormal.jpg'
        }
    }

    //   搜索
    searchWord = (value)=> {
		this.setState({
            inputValue: value,
        })
    }
    // 聚焦搜索框方法
	onFocus = () => {
		this.changeShow('priceBool',false);
		this.changeShow('searchBool',true);
    }
    //  点击搜索icon方法
	searchIcon = ( value,e) => {
		this.setState({
			inputValue:value
		},()=>{
			this.changeShow('searchBool',false)
			// this.getHttpproduct();
		})
    }
    
    // 过滤商品
	filter = (type, e) =>{
		this.setState({
			change: type
		},()=>{
			// this.getHttpproduct();
            this.changeShow('priceBool',false);
            // alert(this.state.change)
		})
    }
    // 点击价格
	onPrice = () => {
		this.changeShow('searchBool',false)
		this.changeShow('priceBool',true)
	}
    
    // 点击改变控制元素隐藏的数据值
	changeShow = ( tate,value,) => {
		// console.log('点击改变控制元素隐藏的数据值~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~',tate)
		this.setState({
			[tate]:value
		})
    }

    
    // 清空搜索记录
	clear = () => {
        this.state.searchWordList = [];
        this.setState({

        })
		// DoHttp.get({
		// 	url:'search/logic/clear.php',
		// 	success:(data)=>{
		// 		this.setState({
		// 			searchWordList: data
		// 		})
		// 	}
		// })
	}

    // 总render
    render() {
        return(
            <CPage rel>
                <CContent mt='160'>
                    {/* 商品列表 */}
					<Proj_Prod_List data={this.state.list} ></Proj_Prod_List>
                </CContent>


                {/* 顶部 star */}
                <CHeader h='160' y='center' bg='#fff' >
                    <CColumn style={{width:this.state.windowWidth}}>
                        {/* 搜索栏 */}
                        <CBetween h='90' px='10' bg='#fff' style={{width:'100%'}}>
                            <CHand df>
                                <CIcon color="#434343" w='38' h='38' icon={ Licon.gobcak }></CIcon>
                            </CHand>
                            <CItemX f='1' bg='#f5f5f5' x='left' y='center' h='50' mx='10' ra='25'>
                                <CIcon icon={ Licon["shop-seach"]} ml='18' w='34' h='34' color='#a8a8a8'></CIcon>
                                <TextInput
                                    underlineColorAndroid="transparent"
                                    placeholder='请输入商品名称'
                                    value={this.state.inputValue}
                                    onChangeText={e=>this.searchWord(e)}
                                    onFocus={_=>this.onFocus()}
                                    style={{flex:1,fontSize:12,paddingLeft:5,height:26,lineHeight:26,paddingTop:0,paddingBottom:0}}
                                />
                            </CItemX>
                            <CItemY x='center' y='center' df>
                                <CText size='24' color='#dc233e'>搜索</CText>
                            </CItemY>
                        </CBetween>
                        {/* 筛选项 */}
                        <CAround h='70' style={{width:'100%'}} px='30'>
                            <CHand  x='center' f='1' y='center' style={{height:'100%'}} onPress={_=>this.filter('new')}>
                                {
                                    this.state.change == 'new' ? (
                                        <Text style={[this.state.changeClass[0],{fontSize:12,borderRightColor:'#f1f1f1',borderRightWidth:1,textAlign:'center',width:'100%'}]}>最新</Text>
                                    ) : (
                                        <Text style={[this.state.changeClass[1],{fontSize:12,borderRightColor:'#f1f1f1',borderRightWidth:1,textAlign:'center',width:'100%'}]}>最新</Text>
                                    )
                                }
                            </CHand>
                            <CHand x='center' f='1' y='center' style={{height:'100%'}} onPress={_=>this.filter('sale')}>
                                {
                                    this.state.change == 'sale' ? (
                                        <Text style={[this.state.changeClass[0],{fontSize:12,borderRightColor:'#f1f1f1',borderRightWidth:1,textAlign:'center',width:'100%'}]}>销量</Text>
                                    ) : (
                                        <Text style={[this.state.changeClass[1],{fontSize:12,borderRightColor:'#f1f1f1',borderRightWidth:1,textAlign:'center',width:'100%'}]}>销量</Text>
                                    )
                                }
                            </CHand>
                            
                            <CHand x='center' f='1' y='center' style={{height:'100%'}} onPress={_=>this.onPrice()}>
                                <CHand style={{width:'100%',height:'100%'}} x='center' y='center' f='1' >
                                    {
                                        this.state.change == 'priceASC' || this.state.change == 'priceDESC' ? (
                                            <Text style={[this.state.changeClass[0],{textAlign:'center',fontSize:12}]}>价格</Text>
                                            ) : (
                                            <Text style={[this.state.changeClass[1],{textAlign:'center',fontSize:12}]}>价格</Text>
                                        )
                                    }
                                    {
                                        this.state.change == 'priceASC' || this.state.change == 'priceDESC' ? (
                                            <CIcon icon={Licon["shoop-pro-list"]} w='30' h='50' color='#dc233e' />
                                            ) : (
                                            <CIcon icon={Licon["shoop-pro-list"]} w='30' h='50' color='#a4a4a4' />
                                        )
                                    }
                                    
                                </CHand>
                            </CHand>
                            
                        </CAround>
                    </CColumn>
                </CHeader> 
                {/* 顶部 star */}

                {/* 搜索词弹框 */}
                { this.state.searchBool && 
                    <CFloat style={{width:this.state.windowWidth,height:this.state.windowHeight,top:45,left:0,zIndex:101,position:'absolute'}}>
                        <CHand onPress={_=>this.changeShow('searchBool',false)} style={{width:this.state.windowWidth,height:this.state.windowHeight,position:'absolute',top:0,left:0,zIndex:102,backgroundColor:'rgba(0,0,0,.5)'}}><CText> </CText></CHand>

                        <CColumn pa='30' pt='10' bg='#fff' style={{width:'100%',position:'absolute',top:0,left:0,zIndex:103}}>
                            <CBetween h='100' y='center' style={{width:'100%'}}>
                                <CText size='24' color='#333' bold>历史记录</CText>
                                <CText size='24' color='#333' onPress={this.clear}>清空记录</CText>
                            </CBetween>
                            
                            <CColumn>
                                {
                                    this.state.searchWordList.map( (item,index) => {
                                        return(
                                            <CBetween h='80' y='center' bb='2 solid #eaeaea'>
                                                <CHand y='center' f='1' style={{width:'70%'}} oh>
                                                    <CHand onPress={_=>this.searchIcon(item)}>
                                                        <CIcon icon={Licon["shop-seach"]} w='30' h='30' mr='5' color='#dc233e' />
                                                    </CHand>
                                                    <CText size='28' h='80' lh='80' oh color='#333' f='1' onPress={_=>this.searchWord(item)}>{item}</CText>
                                                    {/* .length<20 ? item : item.substring(0,20)+'...' */}
                                                </CHand>
                                            </CBetween>
                                        )
                                    })
                                }
                            </CColumn>
                        </CColumn>
                    </CFloat>
                }

                {/* 价格弹框 */}
				{ this.state.priceBool && 
					<CFloat style={{width:this.state.windowWidth,height:this.state.windowHeight,top:80,left:0,zIndex:101,position:'absolute'}}>
						<CHand onPress={_=>this.changeShow('priceBool',false)} style={{width:this.state.windowWidth,height:this.state.windowHeight,position:'absolute',top:0,left:0,zIndex:102,backgroundColor:'rgba(0,0,0,.5)'}}><CText> </CText></CHand>

						<CColumn pa='30' pt='10' bg='#fff' style={{width:'100%',position:'absolute',top:0,left:0,zIndex:103,borderTop:'1 solid #eaeaea'}}>
							<CLine h='70' y='center' bb='1 solid #eaeaea' onPress={_=>this.filter('priceASC')}>
								<CText size='22' h='70' lh='70' color='#333' style={{width:'100%'}}>价格升序</CText>
							</CLine>
							<CLine h='70' y='center' bb='1 solid #eaeaea' onPress={_=>this.filter('priceDESC')}>
								<CText size='22' h='70' lh='70' color='#333' style={{width:'100%'}}>价格降序</CText>
							</CLine>
						</CColumn>
					</CFloat>
				}

            </CPage>
        )
    }
}